<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>[[${video.video_title}]]</title>
    <link th:href="@{css/video-js.css}" rel="stylesheet">
    <script th:src="@{js/video.min.js}"></script>
    <script th:src="@{js/flv.min.js}"></script>
    <script th:src="@{js/videojs-flvjs.min.js}"></script>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .video-component{
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -600px;
        }
        .vtit{
            width: 1190px;
            height: 60px;
            padding-left: 10px;
            position: absolute;
            font-family: "微软雅黑";
            font-size: 22px;
            font-weight: bold;
            line-height: 60px;
            left: 50%;
            margin-left: -600px;
            top: 10px;

            overflow:hidden;
            word-break:keep-all;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
        .vtime{
            width: 1200px;
            height: 35px;
            font-family: "微软雅黑";
            font-size: 12px;
            font-weight: bold;
            line-height: 35px;
            position: absolute;
            color: #999;
            left: 50%;
            margin-left: -600px;
            top: 60px;

            overflow:hidden;
            word-break:keep-all;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
        .vtime>.date,.vtime>.hits,.vtime>.time,.vtime>.author{
            position: absolute;
            height: 100%;
        }
        .vtime>.date{
            width: 150px;
            margin-left: 25px;
        }
        .vtime>.hits{
            width: 100px;
            margin-left: 225px;
        }
        .vtime>.time{
            width: 100px;
            margin-left: 375px;
        }
        .vtime>.author{
            width: 200px;
            margin-left: 525px;
        }
    </style>

</head>
<body>
    <div class="vtit" th:text="${video.video_title}"></div>
    <div class="vtime">
        <div class="date">[[${video.release_time}]]</div>
        <div class="hits">[[${video.number_of_hits}]]</div>
        <div class="time">[[${video.video_time}]]</div>
        <div class="author">[[${video.video_author}]]</div>
    </div>

    <video
            id="videoElement"
            class="video-component"
            ref="videoElement"
            controls
            autoplay
            width="1200"
            height="600"
    >Your browser is too old which doesn't support HTML5 video.</video>
    <input id="inp" type="hidden" th:value="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/file/'}+${video.video_file_path}">

</body>
</html>
<script>
    const text = document.getElementById("inp");
    const uri = text.getAttribute("value");
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: "flv",
            url: uri
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }

    //禁用右键（防止右键查看源代码）
    //window.oncontextmenu=function(){return false;}
    //禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
    // window.onkeydown = window.onkeyup = window.onkeypress = function () {
    //     window.event.returnValue = false;
    //     return false;
    // }
    // //如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
    // var h = window.innerHeight,w=window.innerWidth;
    // window.onresize = function () {
    //     if (h!= window.innerHeight||w!=window.innerWidth){
    //         alert("你想用开发者工具？那是不可能的，小老弟 -_-!!!");
    //         window.close();
    //         window.location = "about:blank";
    //     }
    // }
</script>

